<template>
	<!-- template部分 -->
	<view class="form-item">
		<text class="label">性别</text>
		<picker mode="selector" :value="genderIndex" :range="genderList" range-key="name" :disabled="loading" @change="onGenderChange" @cancel="onGenderCancel">
			<view class="picker-display">
				{{ genderList[genderIndex].name }}
				<text class="arrow-icon">></text>
			</view>
		</picker>
	</view>
</template>

<script>
// script部分
export default {
	data() {
		return {
			loading: true, // 模拟数据加载状态
			genderIndex: 2, // 默认选中'保密'
			genderList: [
				{ id: 1, name: '男' },
				{ id: 2, name: '女' },
				{ id: 0, name: '保密' }
			]
		};
	},
	onLoad() {
		// 模拟网络请求，2秒后加载完成
		setTimeout(() => {
			// 假设从服务器获取到用户的性别是 '男' (id: 1)
			const userGenderId = 1;
			this.genderIndex = this.genderList.findIndex((item) => item.id === userGenderId);
			this.loading = false; // 解除禁用
		}, 2000);
	},
	methods: {
		onGenderChange(e) {
			console.log('用户选择了新的性别，picker返回的索引是：', e.detail.value);
			this.genderIndex = Number(e.detail.value);

			// 架构师思考：通常我们会把选择结果的 id 发送给后端
			const selectedGender = this.genderList[this.genderIndex];
			console.log('准备提交给后端的数据是：', selectedGender);
			// ...接下来可以调用 uni.request 发送保存请求
		},
		onGenderCancel(e) {
			console.log('用户取消了性别选择。');
			// 这个事件可以用于数据埋点，分析用户行为
		}
	}
};
</script>

<style scoped>
/* style部分 */
.form-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	background-color: #ffffff;
	border-bottom: 1px solid #f0f0f0;
	font-size: 16px;
}
.label {
	color: #333333;
	flex-shrink: 0;
	margin-right: 15px;
}
.picker-display {
	display: flex;
	align-items: center;
	color: #888888;
	text-align: right;
	flex-grow: 1;
	justify-content: flex-end;
}
.arrow-icon {
	margin-left: 8px;
	color: #cccccc;
	font-weight: bold;
}
picker[disabled] .picker-display {
	color: #c0c0c0;
	cursor: not-allowed;
}
</style>
